<template>
	<el-form size="medium" ref="tableForm" :model="tableForm" class="custom_select_wrapper">
		<el-table :data="tableForm.lists" size="medium" border>
			<el-table-column label="脱密记录" min-width="180">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`lists.${$index}.outId`" :rules="tableRules.outId">
						<el-select v-model="row.outId" v-bind="selectConfig" :remote-method="handleRemoteMethod" :loading="selectLoading">
							<el-option v-for="(item, index) in ciphertextList" :key="index" :label="item.title" :value="item.outId"></el-option>
						</el-select>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="56" align="center">
				<template slot="header"><el-button type="text" @click="handleAddedUser()">新增</el-button></template>
				<template slot-scope="{ row, $index }">
					<el-button class="del" type="text" size="small" icon="el-icon-delete" @click="handleDeleteUser($index)"></el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-form>
</template>

<script>
import lodash from 'lodash';
import emitter from 'element-ui/src/mixins/emitter';
import { listOut, getOut } from '@/api/personnal/ciphertext';
export default {
	mixins: [emitter],
	props: {
		value: { type: Array, default: () => [] },
		list: { type: Array, default: () => [] }
	},
	data() {
		return {
			tableForm: {
				lists: this.value
			},
			tableRules: {
				outId: [{ required: true, message: '请选择脱密记录', trigger: 'change' }]
			},
			ciphertextList: [],
			selectLoading: false,
			selectConfig: {
				remote: true,
				multiple: false,
				filterable: true,
				reserveKeyword: true,
				style: { width: '100%' },
				placeholder: '输入人员关键词'
			}
		};
	},
	watch: {
		value(arr) {
			this.$set(this.tableForm, 'lists', arr);
		},
		'tableForm.lists'(arr) {
			this.$emit('input', arr);
			this.dispatch('ElFormItem', 'el.form.change', [arr]);
		},
		list(arr) {
			this.ciphertextList = [...arr];
		}
	},
	methods: {
		//获取脱密记录
		async getCiphertextList(data) {
			let params = { pageNum: 1, pageSize: 9999, ...data };
			let result = await listOut(params);
			this.selectLoading = false;
			if (result.code === 200) {
				let datas = result.rows || [];
				let lists = datas.map((item) => {
					return { ...item, title: `${item.userName}的脱密记录${item.createTime}` };
				});
				this.ciphertextList = [...this.ciphertextList, ...lists].reduce((prev, cur) => {
					let isExist = prev.some((n) => n.outId === cur.outId);
					!isExist && prev.push(cur);
					return prev;
				}, []);
			}
		},

		handleRemoteMethod(userName) {
			this.selectLoading = true;
			this.getCiphertextList({ userName });
		},

		async handleAddedUser() {
			if (!(await this.validChildForm())) return false;
			this.tableForm.lists.push({ outId: null });
		},

		handleDeleteUser(index) {
			this.tableForm.lists.splice(index, 1);
		},

		validChildForm() {
			return new Promise((resolve) => {
				this.$refs['tableForm'].validate((valid) => {
					resolve(valid);
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.custom_select_wrapper::v-deep {
	width: 100%;
	th.el-table__cell {
		line-height: 1;
		height: 37px;
		padding: 0;
		.el-button {
			padding: 0;
		}
	}
	td.el-table__cell {
		padding: 0;
		.cell {
			padding: 0;
		}
	}
	.el-table__empty-block {
		min-height: 56px;
	}
	.el-table__empty-text {
		line-height: 56px;
	}
	.el-button.del {
		font-size: 16px;
	}
	.el-button.add {
		margin-top: 10px;
	}
	.el-form-item__content {
		padding: 10px;
	}
}
</style>
